<template>
  <div class="vm-project-container">
      <vm-common-header
        :pageTitle="pageTitle"
        :goBack="goBack"></vm-common-header>
        <div class="vm-projectDetails-container" ref="project">
          <div class="content">
            <div class="vm-projectDetails-t">
              <ul>
                <li class="vm-t-list">
                  <h6>项目编号：</h6>
                  <p>{{ projectData.scode }}</p>
                </li>
              </ul>
            </div>
            <div class="vm-projectDetails-b">
              <ul>
                <li class="vm-b-list p_n">
                  <h6>项目名称：</h6>
                  <p>{{ projectData.scode }}</p>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">项目版本：</h6>
                    <p class="vm-b-item-value">{{ projectData.projectversions }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">当前阶段：</h6>
                    <p class="vm-b-item-value">{{ projectData.times }}</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">所属行业：</h6>
                    <p class="vm-b-item-value">{{ projectData.typeid }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">业主类型：</h6>
                    <p class="vm-b-item-value">{{ projectData.ownertype }}</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">工程类型：</h6>
                    <p class="vm-b-item-value">{{ projectData.projecttype }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">采购情况：</h6>
                    <p class="vm-b-item-value">尚未开始采购</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">竣工时间：</h6>
                    <p class="vm-b-item-value" style="color: #da251d">{{ projectData.endtime }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">占地面积：</h6>
                    <p class="vm-b-item-value">{{ projectData.areaspace }}</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">投资金额：</h6>
                    <p class="vm-b-item-value">{{ projectData.investmentnum }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">资金情况：</h6>
                    <p class="vm-b-item-value">{{ projectData.capitalstand }}</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">权重：</h6>
                    <p class="vm-b-item-value">{{ projectData.weight }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">省份：</h6>
                    <p class="vm-b-item-value">{{ projectData.province }}</p>
                  </div>
                </li>
                <li class="vm-b-list">
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">发布日期：</h6>
                    <p class="vm-b-item-value" style="color: #da251d">{{ projectData.posttime }}</p>
                  </div>
                  <div class="vm-b-item">
                    <h6 class="vm-b-item-name">区域：</h6>
                    <p class="vm-b-item-value">{{ projectData.areas }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="vm-projectDetails-f">
              <!-- 如果未登录 -->
              <div class="vm-notLogin" v-if="!isLogin">
                <h6 class="vm-notLogin-link">项目联系方式</h6>
                <div class="vm-notLogin-isLogin">
                  <div class="prompt">
                    <i class="vm-icon prompt"></i>
                    <p>请登录后查看联系方式</p>
                  </div>
                  <router-link tag="div" to="/login" class="login">
                    登录/注册
                  </router-link>
                </div>
                <div class="vm-details" style="margin:0;" v-html="projectData.detail">
                </div>
              </div>
              <!-- 如果登录 -->
              <div class="vm-isLogin" v-if="isLogin">
                <!--<div class="vm-project-contact">-->
                    <!--<h6>&#45;&#45; 项目联系方式 &#45;&#45;</h6>-->
                <!--</div> -->
                <!--<div class="vm-project-item">-->
                  <!--<div class="project-contact-info">-->
                    <!--<h6>业主单位联系信息</h6>-->
                  <!--</div>-->
                  <!--<ul class="vm-project-content">-->
                    <!--<li class="vm-project-list">-->
                      <!--<div class="vm-item-l">-->
                        <!--<i class="vm-icon user"></i>-->
                      <!--</div>-->
                      <!--<div class="vm-item-c">-->
                        <!--<div class="vm-item-c-h">-->
                          <!--<h5 class="companyName">河南绿邦精细化工有限公司</h5>-->
                          <!--<span class="proprietorUnit">业主单位</span>-->
                        <!--</div>-->
                        <!--<div class="vm-item-c-b">-->
                          <!--<p>联系人：<span class="vm-item-c-b-name">王进京</span><span class="vm-item-c-b-duties">总经理</span><span class="vm-item-c-b-projectPerson">项目负责人</span></p>-->
                          <!--<p>手机：<span>18003937008</span></p>-->
                          <!--<p>微信：<span>18003937008</span></p>-->
                          <!--<p>地址：<span>河南省撒旦阿萨德阿萨德爱的</span></p>-->
                          <!--<p>邮编：<span>457500</span></p>-->
                          <!--<p>备注：<span>目前正在阶段审批</span></p>-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="vm-item-r"></div>-->
                    <!--</li>-->
                    <!--<li class="vm-project-list">-->
                      <!--<div class="vm-item-l">-->
                        <!--<i class="vm-icon user"></i>-->
                      <!--</div>-->
                      <!--<div class="vm-item-c">-->
                        <!--<div class="vm-item-c-h">-->
                          <!--<h5 class="companyName">河南绿邦精细化工有限公司</h5>-->
                          <!--<span class="proprietorUnit">业主单位</span>-->
                        <!--</div>-->
                        <!--<div class="vm-item-c-b">-->
                          <!--<p>联系人：<span class="vm-item-c-b-name">王进京</span><span class="vm-item-c-b-duties">总经理</span><span class="vm-item-c-b-projectPerson">项目负责人</span></p>-->
                          <!--<p>手机：<span>18003937008</span></p>-->
                          <!--<p>微信：<span>18003937008</span></p>-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="vm-item-r"></div>-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</div>-->
                <!--<div class="vm-project-item">-->
                  <!--<div class="project-contact-info">-->
                    <!--<h6>设计单位联系信息</h6>-->
                  <!--</div>-->
                  <!--<ul class="vm-project-content">-->
                    <!--<li class="vm-project-list">-->
                      <!--<div class="vm-item-l">-->
                        <!--<i class="vm-icon user"></i>-->
                      <!--</div>-->
                      <!--<div class="vm-item-c">-->
                        <!--<div class="vm-item-c-h">-->
                          <!--<h5 class="companyName">河南绿邦精细化工有限公司</h5>-->
                          <!--<span class="proprietorUnit">设计单位</span>-->
                        <!--</div>-->
                        <!--<div class="vm-item-c-b">-->
                          <!--<p>联系人：<span class="vm-item-c-b-name">王进京</span><span class="vm-item-c-b-duties">总经理</span><span class="vm-item-c-b-projectPerson">项目负责人</span></p>-->
                          <!--<p>手机：<span>18003937008</span></p>-->
                          <!--<p>微信：<span>18003937008</span></p>-->
                          <!--<p>地址：<span>河南省撒旦阿萨德阿萨德爱的</span></p>-->
                          <!--<p>邮编：<span>457500</span></p>-->
                          <!--<p>备注：<span>目前正在阶段审批</span></p>-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="vm-item-r"></div>-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</div>-->
                <!--<div class="vm-project-item">-->
                  <!--<div class="project-contact-info">-->
                    <!--<h6>施工单位联系信息</h6>-->
                  <!--</div>-->
                  <!--<ul class="vm-project-content">-->
                    <!--<li class="vm-project-list">-->
                      <!--<div class="vm-item-l">-->
                        <!--<i class="vm-icon user"></i>-->
                      <!--</div>-->
                      <!--<div class="vm-item-c">-->
                        <!--<div class="vm-item-c-h">-->
                          <!--<h5 class="companyName">河南绿邦精细化工有限公司</h5>-->
                          <!--<span class="proprietorUnit">施工单位</span>-->
                        <!--</div>-->
                        <!--<div class="vm-item-c-b">-->
                          <!--<p>联系人：<span class="vm-item-c-b-name">王进京</span><span class="vm-item-c-b-duties">总经理</span><span class="vm-item-c-b-projectPerson">项目负责人</span></p>-->
                          <!--<p>手机：<span>18003937008</span></p>-->
                          <!--<p>微信：<span>18003937008</span></p>-->
                          <!--<p>地址：<span>河南省撒旦阿萨德阿萨德爱的</span></p>-->
                          <!--<p>邮编：<span>457500</span></p>-->
                          <!--<p>备注：<span>目前正在阶段审批</span></p>-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="vm-item-r"></div>-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</div>-->
                <div class="vm-details" v-html="projectData.detail">
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import vmCommonHeader from '@/components/vm-common-header.vue'
  import { getProjectDetailsData } from '@/api/project.js'
  import { userIsLogin } from '@/utils/userHandler.js'
    export default {
        name: "ProjectDetails",
        data () {
          return {
            pageTitle: this.$route.meta.pageTitle,
            goBack: this.$route.meta.goBack,
            projectId: this.$route.params.id,
            projectData: new Object(),
            isLogin: userIsLogin()
          }
        },
        created () {
          this.getProjectDetails();
        },
        mounted () {
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll(this.$refs.project, {
                click: true,
                scrollbar:false
              });
            } else {
              this.scroll.refresh();
            }
          });
        },
        methods: {
          getProjectDetails() {
            getProjectDetailsData(this.projectId).then(res => {
              this.projectData = res.data.data[0];
            }).catch(err => console.log(err));
          }
        },
        components: {
          'vm-common-header': vmCommonHeader,
        }
    }
</script>

<style scoped lang="scss">
.vm-project-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-bottom: 0 !important;
}
.vm-projectDetails-container {
  height: 100%;
  background-color: #f4f4f4;
  /* 项目编号style */
  .vm-projectDetails-t {
    margin: 20px 0;
    background-color: #fff;
    ul {
      li.vm-t-list {
        height: 80px;
        display: flex;
        align-items: center;
        padding-left: 40px;
        h6 {
          color: #999999;
          font-size: 22px;
        }
        p {
          padding-left: 15px;
          color: #333333;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
  }
  /* 项目基本信息 style */
  .vm-projectDetails-b {
    background: #fff;
    ul {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      li.vm-b-list.p_n {
        padding-left: 40px;
        margin-left: 0;
        flex: 1;
        display: flex;
        width: 100%;
        height: 100px;
        align-items: center;
        text-align: left;
        h6 {
          font-size: 0.293333rem;
          width: 120px;
        }
        p {
          font-size: 26px;
          color: #333333;
          flex: 1;
        }
      }
      li.vm-b-list {
        min-height: 63px;
        border-bottom: 1px solid #e5e5e5; /* no */
        width: 100%;
        display: flex;
        margin-left: 40px;
        &:last-child {
          border-bottom: none;
        }
        div.vm-b-item {
          display: flex;
          align-items: center;
          flex: 1;
          .vm-b-item-name {
            font-size: 22px;
            color: #999999;
            width: 120px;
            text-align: left;
          }
          .vm-b-item-value {
            font-size: 22px;
            color: #000;
            flex: 1;
            text-align: left;
          }
        }
      }
    }
  }
  /* 项目信息底部 style */
  .vm-projectDetails-f {
    margin-top: 30px;
    padding-top: 30px;
    background-color: #fff;
    padding-bottom: 40px;
    .vm-notLogin {
      display: flex;
      flex-direction: column;
      margin: 20px 40px 0 40px;
      h6.vm-notLogin-link {
        text-align: left;
        font-size: 32px;
        color: #000;
        font-weight: bold;
        padding: 22px 0 12px 0;
      }
      div.vm-notLogin-isLogin {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 150px;
        border-top: 1px solid #eeeeee; /* no */
        border-bottom: 1px solid #eeeeee; /* no */
        margin: 0 79px 0 30px;
        .login {
          height: 55px;
          line-height: 55px;
          width: 135px;
          border-radius: 10px;
          border:2px solid #d9271b; /* no */
        }
        .prompt {
          display: flex;
          align-items: center;
          .vm-icon.prompt {
            width: 34px;
            height: 34px;
            background-position: -87px -107px;
            margin-right: 15px;
          }
        }
      }
    }
    .vm-isLogin {
      .vm-project-contact {
        height: 80px;
        background-color: #f4f4f4;
        display: flex;
        justify-content: space-around;
        align-items: center;
        h6 {
          color: #000;
          font-size: 30px;
          font-weight: bold;
        }
      }
      .vm-project-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: left;
        background-color: #fff;
        padding-left: 45px;
        margin-bottom: 20px;
        .project-contact-info {
          align-items: center;
          display: flex;
          height: 66px;
          border-bottom: 1px solid #e5e5e5; /* no */
          width: 100%;
            h6 {
            color: #676767;
            font-size: 24px;
            position: relative;
            &::before {
              content: '';
              display: inline-block;
              width: 8px;
              height: 24px;
              background-color: #da251d;
              vertical-align: middle;
              position: absolute;
              left: -15px;
            }
          }
        }
        ul.vm-project-content {
          width: 100%;
          li.vm-project-list {
            display: flex;
            padding: 30px 0;
            border-bottom: 1px solid #e5e5e5; /* no */
            &:last-child {
              border-bottom: none;
            }
            .vm-item-l {
              width: 90px;
              i.vm-icon.user {
                width: 80px;
                height: 80px;
                background-position: -3px -459px;
              }
            }
            .vm-item-c-h {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              margin-bottom: 30px;
              h5.companyName {
                font-size: 28px;
                color: #d8271b;
                font-weight: bold;
              }
            }
            .vm-item-c {
              display: flex;
              flex-direction: column;
              align-items: center;
              h5 {
                align-items: center;
                display: flex;
              }
              span.proprietorUnit {
                border-radius: 5px;
                padding: 0 5px;
                height: 30px;
                background-color: #8dd0ff;
                color: #fff;
                display: inline-block;
              }
              .vm-item-c-b {
                padding: 10px;
                background-color: #f6f6f6;
                width: 570px;
                p {
                  color: #333;
                  height: 33px;
                  span {
                    color:#999999;
                  }
                  .vm-item-c-b-duties {
                    padding: 0 30px 0 55px;
                  }
                }
              }
            }
          }
        }
      }
    }
    div.vm-details {
       margin: 0 40px;
        text-align: left;
        > h6 {
          height: 85px;
          line-height: 85px;
          color: #000000;
          font-size: 30px;
          font-weight: bold;
        }
        p {
          height: 35px;
        }
      }
  }
}
</style>
